<template>
  <div class="rightContent">
    <!-- 头部菜单 -->
    <div class="toubuNav">
      <div class="navLeft">
        <el-button
          @click="mianbaoxuanzhong(item)"
          v-for="item in catalogueList"
          type="primary"
          class="leftNav"
        >
          {{ item }}
        </el-button>
      </div>
      <div class="jiantouNav">
        <i @click="upOrDwonfn(1)" class="el-icon-caret-top"></i>
        <i @click="upOrDwonfn(2)" class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <!-- 内容 -->
    <div class="neirongContent">
      <div
        class="neirongDiv"
        v-for="item in cake_data"
        :key="item.id"
        @click="addNavList(item)"
      >
        <div class="icon-data-left">
          <img :src="item.image" />
        </div>
        <div class="neirongDivNav">
          <div>{{ item.name }}</div>
          <div style="color: red">¥{{ item.price }}</div>
        </div>
      </div>
    </div>
    <div class="caidan">
      <el-input
        @input="searchMenu"
        placeholder="请输入内容"
        v-model="inputSearch"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="footer">
      <div class="footerLeft">
        <div class="footerListdiv" v-for="item in cake_menu" :key="item.id">
          <div>
            <img class="footerimg" :src="item.icon" alt="" />
          </div>
          <div>
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="footerRight"></div>
    </div>
  </div>
</template>

<script>
import catalogue from "@/json/catalogue.json";
import cake_data from "@/json/cake_data.json";
import cake_menu from "@/json/cake_menu.json";
export default {
  name: "right_menu",
  data() {
    return {
      catalogueList: [],
      cake_data: [],
      cake_menu: cake_menu,
      inputSearch: null,
    };
  },
  mounted() {
    const navList = catalogue.slice(0, 16);
    this.catalogueList = navList;
    this.cake_data = cake_data.filter((item) => {
      return item.category == "面包类";
    });
  },
  methods: {
    upOrDwonfn(data) {
      switch (data) {
        case 1:
          const navList1 = catalogue.slice(0, 16);
          this.catalogueList = navList1;
          break;
        case 2:
          const navList2 = catalogue.slice(16, 32);
          this.catalogueList = navList2;
          break;
      }
    },
    mianbaoxuanzhong(item) {
      this.cake_data = cake_data.filter((i) => {
        return i.category == item;
      });
    },
    searchMenu() {
      const num = this.cake_data.filter((item) => {
        return item.name.indexOf(this.inputSearch) !== -1;
      });
      this.cake_data = num;
      if (this.inputSearch == "") {
        this.cake_data = cake_data.filter((item) => {
          return item.category == "面包类";
        });
      }
    },
    addNavList(item) {
      this.$bus.$emit("addNavList", item);
    },
  },
};
</script>

<style>
.rightContent {
  width: 100%;
  height: 100%;
  background-color: rgb(192, 216, 238);
}
/* 头部菜单CSS */
.toubuNav {
  width: 100%;
  height: 80px;
  background: pink;
  display: flex;
}
.navLeft {
  width: 92%;
  display: flex;
  background: hsl(195deg 100% 35%);
  flex-flow: row wrap;
}
.leftNav {
  width: 12.5%;
  height: 40px;
}
.el-button + .el-button {
  margin: 0;
}
.el-button--primary {
  background: hsl(195deg 100% 35%);
}
.jiantouNav {
  width: 8%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: hsl(87deg 60% 50%);
  color: white;
}
.jiantouNav i {
  cursor: pointer;
}

/* 内容 */
.neirongContent {
  display: flex;
  flex-wrap: wrap;
  height: 540px;
  overflow: auto;
}
.neirongDiv {
  display: flex;
  width: 160px;
  height: 120px;
  background: white;
  margin: 10px;
  cursor: pointer;
}
.icon-data-left {
  width: 60px;
  height: 100%;
  background: rgb(214, 214, 214);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}
.neirongDivNav {
  display: flex;
  font-size: 14px;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

img {
  width: 100%;
  height: 100%;
}
.caidan {
  padding: 10px;
}
.caidan .el-input {
  width: 200px;
}
.footer {
  height: 72px;
  background: hsl(195deg 100% 40%);
}
.footerimg {
  width: 20px;
  height: 20px;
}
.footer {
  display: flex;
}
.footerLeft {
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.footerListdiv {
  width: 80px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  font-size: 12px;
  cursor: pointer;
}
</style>